CSS linear or clip-path of chamefer
斜切角，Angle of chamefer，通过CSS来实现的方法主要有linear-gradient、border-imgage、clip-path来进行绘制斜切角或三角形。
linear-gradient
通过使用使用线性渐变，分别通过45deg/-45deg角度来实现左下角和右下角的斜切角，当然这里使用的斜切角大小为15px，可根据需求来进行调整。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <style>
.angle-45a {
background: linear-gradient(45deg, transparent 15px, blue 0);
}
.angle-45b {
background: linear-gradient(-45deg, transparent 15px, blue 0);
}
</style>
<div class="xu-col-9 or">
<div class="con-md-2">
<div class="angle-45a"></div>
<div class="angle-45b"></div>
</div>
</div>
|
除此之外，我们也可通过使用多个线性渐变来达到多个角度切割的效果，线性渐变可以配合：
| ID |
DA |
FA |
| top |
顶部 |
top and left or top and right |
| bottom |
底部 |
bottom and left of bottom and rifht |
| left |
左 |
|
| right |
右 |
|
由于默认的情况下两个线性渐变被应用在同一个元素，因此需要通过使用将此分割成50%让其各占一半。 |
|
|
为避免重复，需要通过使用background-repeat来避免背景的重复：
1
2
3
4
5
6
7
8
9
10
11
12
| .angle-45a {
background: linear-gradient(-45deg, transparent 15px, #6464ff 0) right,
linear-gradient(45deg, transparent 15px, #6464ff 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
.angle-45b {
background: linear-gradient(45deg, transparent 15px, #6464ff 0) right,
linear-gradient(-45deg, transparent 15px, #6464ff 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
}
|
不仅仅线性可以达到斜切角的效果，径向渐变也可以来完成其曲线切角的效果：
1
2
3
4
5
6
7
8
9
| .angle-45a {
background: radial-gradient(circle at top left, transparent 50px, #6464ff 0);
background-size: 50% 100%;
background-repeat: no-repeat;
}
.angle-45b {
background: radial-gradient(circle at top right, transparent 50px, #6464ff 0);
background-repeat: no-repeat;
}
|
一秒爱上 clip-path
对于 border-image，svg 玩家可能会狂喜，因为通过使用border-image中通过 svg内的多边形来实现，是不会太难的，但是对于 CSS 玩家可能会感觉非常的无语，于是clip-path可能会让你一秒爱上。
1
2
| border: 20px solid transparent;
border-image: 1 url('data:image/svg+xml,\<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="AliceBlue">\<polygon points="2 0, 80 0, 100 100, 0 100"/>\</svg>');
|
clip-path
裁剪路径，（clip-path），使用SVG或形状定义一个HTML元素的可见区域方法， 在MDN中，介绍如下：
clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
这时候可能CSS玩家会很无语，于是国外有一个非常不错的项目，来直接生成clip-path路径（PS：SVG很多路径都可以被生成）
https://bennettfeely.com/clippy/
1
| clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
|
